<template>
  <div> 
    <input type="text" id="txtKeyword">  <el-button @click="searchAddr">clickme</el-button>
    <div id="allmap" class="allmap" style="width:800px;height:600px"></div> 
  </div>
</template>

<script>
// import BMap from 'BMap'
// import {MP} from './map.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      local:'',
      position:'',
      map:'',
    }
  },
  props:['address'],
  created () {  
  },
  mounted() {
    this.$nextTick(function(){
      var _this = this;
      MP(_this.ak).then(BMap => {
        _this.map = new BMap.Map("allmap");            // 创建Map实例
        _this.map.centerAndZoom("{$address}", 12);
        _this.map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        _this.map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
        _this.map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

        _this.local = new BMap.LocalSearch(this.map, {
            renderOptions: {map:this.map,autoViewport:true,selectFirstResult:false},
            pageCapacity:10
        });
      })
    });
    
  //  console.log(this.local)
    
 
   
  },
  methods:{
    searchAddr(val) {
        var keys = document.getElementById("txtKeyword").value;
        this.local.search(val);
        
         var keys = new Array("{$address}");
    const that = this;
    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - 10 * 25)
                });
    this.local.setSearchCompleteCallback(function (searchResults) {
           
            if (typeof(searchResults) == "undefined" ) {
                //alert("百度API没有搜索到该地址");
                return;
            }
            console.log(searchResults)
            console.log('----------')
            if(searchResults.length>0) {
                var searchResult = searchResults[0];
            }else {
                var searchResult = searchResults;
            }
            
            var contents = [];
            if(searchResult.getCurrentNumPois() == 0){
               that.$message.error("无法获取该地址经纬度");
            }
            for(var i=0; i<searchResult.getCurrentNumPois(); i++) 
            {
                //获得需要得到的坐标
                var poi = searchResult.getPoi(i);
                if (!poi) {
                    that.$message.error("百度API没有搜索到该地址");
                }
                // console.log(poi);
        
                //设置中心点
                that.map.centerAndZoom(poi.point, 13);
                // 创建标注，为要查询的地方对应的经纬度
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{ icon: myIcon });
                //alert("["+poi.point.lng+","+poi.point.lat+"]");
                //在地图上添加标识
                that.map.addOverlay(marker);
                //点击标识后显示的内容
                contents[i] = "你要查找的地方:【"+poi.title+"】<br/>地址："+poi.address+"<br/>经度："+poi.point.lng+"<br/>纬度："+poi.point.lat;
                
                
                
                marker.setTitle(contents[i]);
                //添加点击事件监听
                //marker.addEventListener("click", makerClick);    
                if (i==0) {
                    that.position = {
                      lng:poi.point.lng,
                      lat:poi.point.lat
                    };
                    that.$emit('mapLng',that.position,contents)
                    var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + contents[0] + "</p>");
                    marker.openInfoWindow(infoWindow); 
                }
                    
            }
            
        });
    }
  }

}
</script>
